.modal-ls {
    --transition-duration: 250ms;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--color-neutral-shadow-raw) / 50%);
    backdrop-filter: blur(2px);
    will-change: opacity;
    overflow: hidden;

    &_optimize &__wrapper {
        will-change: transform;
    }

    &__wrapper {
        width: 100%;
        max-height: 100%;
        padding: 40px 0 56px;
        overflow: auto;
        box-sizing: border-box;
    }

    &__content {
        width: 600px;
        min-height: 100px;
        margin: 0 auto;
        background-color: var(--color-neutral-background);
        border-radius: var(--modal-border-radius, 0.5rem);
        box-shadow:
            0 16px 36px rgba(var(--color-neutral-shadow-raw) / calc(40% * var(--shadow-intensity))),
            inset 0 1px 1px var(--color-neutral-border),
            inset 0 -1px rgba(var(--color-neutral-shadow-raw) / 30%);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    &__header {
        display: flex;
        min-height: 40px;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 2rem;
        box-sizing: content-box;

        &_divided {
            border-bottom: 1px solid var(--color-neutral-border);
        }
    }

    &__title {
        margin: 0;
        margin-right: auto;
        font-size: 1.75rem;
        font-weight: 500;
        color: var(--color-neutral-content);
    }

    &__body {
        flex: 1;
        padding: 0 var(--spacing-wider) var(--spacing-wider);
        min-height: 0;
        line-height: 140%;

        &_bare {
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    &__footer {
        padding: var(--spacing-base) var(--spacing-wider);
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        color: var(--color-neutral-content-subtler);

        & a {
            color: var(--grape_600);
            text-decoration: underline;

            &:hover {
                color: var(--grape_700);
            }
        }

        &:not(.modal-ls__footer_bare) {
            background: var(--color-neutral-surface);
            border-top: 1px solid var(--color-neutral-border);
        }
    }

    &_fullscreen {
        --fullscreen-size-reduction: 80px;

        .modal-ls {
            &__wrapper {
                padding: calc(var(--fullscreen-size-reduction) / 2) 0;
            }

            &__content {
                width: calc(100vw - var(--fullscreen-size-reduction));
                height: calc(100vh - var(--fullscreen-size-reduction));
            }
        }
    }

    &_visible {
        opacity: 0;
        transition: opacity var(--transition-duration) ease;
    }

    &_visible &__wrapper {
        transform: scale(1.05);
        transition: transform var(--transition-duration) ease;
    }

    &.visible {
        opacity: 1;
    }

    &.visible &__wrapper {
        transform: none;
    }

    &.before-appear {
        opacity: 0;
    }

    &.before-appear &__wrapper {
        transform: scale(1.05);
    }

    &.appear {
        opacity: 1;
    }

    &.appear &__wrapper {
        transform: scale(1);
    }

    &.before-disappear {
        opacity: 1;
    }

    &.before-disappear &__wrapper {
        transform: scale(1);
    }

    &.disappear {
        opacity: 0;
    }

    &.disappear &__wrapper {
        transform: scale(1.05);
    }
}
